<template>
    <el-table ref="multipleTable" :data="tableData"
    tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column label="ID" width="118"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column>
    <el-table-column prop="name" label="请假人" width="118"> </el-table-column>
    <el-table-column prop="address" label="所属部门" width="118"> </el-table-column>
    <el-table-column prop="type" label="类型" width="118"></el-table-column>
    <el-table-column prop="start" label="开始日期" width="118"></el-table-column>
    <el-table-column prop="by" label="截至日期" width="118"></el-table-column>
    <el-table-column prop="Days" label="请假天数" width="118"></el-table-column>
    <el-table-column prop="Submit" label="提交时间" width="118"></el-table-column>
    <el-table-column prop="state" label="状态" width="118"><span class="aa">通过</span></el-table-column>
    <el-table-column prop="operation" label="操作" width="170"><span class="bb">编辑</span><span class="bb"> 删除</span></el-table-column>
  </el-table>
  
</template>

<script>
   export default {
    data() {
      return {
        tableData: [{
          date: '20010',
          name: '王小虎',
          address: '人事部',
          type:'事假',
          start:'2021-9-11',
          by:'2021-9-12',
          Days:'  1',
          Submit:'2021-9-11',
        }, {
          date: '20011',
          name: '王二虎',
          address: '技术部',
          type:'病假',
          start:'2021-9-11',
          by:'2021-9-12',
          Days:'1',
          Submit:'2021-9-11',
        }, {
          date: '20012',
          name: '王三虎',
          address: '技术部',
          type:'事假',
          start:'2021-9-11',
          by:'2021-9-12',
          Days:'1',
          Submit:'2021-9-11',
        }, ],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-table-column{
    font-size: 10px;
    text-align: center;
    .label{
      text-align: center;
    }
}
.aa{
  color: green;
}
.bb{
  color: blue;
  cursor: pointer;
}
</style>